{% load bayketags %}
<div id="navbar">
    <template>
        <b-navbar spaced shadow transparent wrapper-class="{% block navclass %}container{% endblock %}">
            <template #brand>
                <b-navbar-item tag="div">
                    {% block navbar_logo %}
                    <h1 class="is-size-4 has-text-weight-medium">baykeshop</h1>
                    {% endblock %} 
                </b-navbar-item>
            </template>
            <template #start>
                {% block navbar_start %}
                <b-navbar-item href="{% url 'baykeshop:home' %}">
                    首页
                </b-navbar-item>
                <b-navbar-item href="{% url 'baykeshop:goods' %}">
                    全部分类
                </b-navbar-item>
                <b-navbar-item href="{% url 'baykeshop:article-list-pc' %}">
                    商城资讯
                </b-navbar-item>
                {% navbar as navs %}
                {% for cate in navs %}
                <b-navbar-dropdown label="{{ cate.name }}">
                    {% for sub_cate in cate.sub_cates %}
                    <b-navbar-item href="{% url 'baykeshop:cate-detail' sub_cate.id %}">
                        {{ sub_cate.name }}
                    </b-navbar-item>
                    {% endfor %}
                </b-navbar-dropdown>
                {% endfor %}
                {% endblock %}             
            </template>
    
            <template #end>
                {% block navbar_end %}
                <b-navbar-item tag="div">
                    {% include 'baykeshop/comp/search_form.html' %}
                </b-navbar-item>
                {% endblock %} 
            </template>
        </b-navbar>
    </template>
</div>

<script>
    var navbar = new Vue({
        el: '#navbar',
        delimiters: ['{$', '$}']
    })
</script>